<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件对象</title>
    <style>
        *{
            user-select: none;
        }
        #ad{
            width:100%;
            height: 200px;
            background:rgb(179, 143, 152);
        }
        html,body,#app{
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div id="app">
        <div id="ad"></div>
    </div>

    <script>
        let ad = document.querySelector('#ad');
        let app = document.querySelector('#app');

        app.addEventListener('touchstart', function(e){
            e.preventDefault();
        })

        ad.addEventListener('touchstart', function(e) {
            this.style.background = '#cea';
            // changedTouches    改变的触点信息, 保存同时按下的触点信息
            // targetTouches     目标元素上, 触点的信息
            // touches           保存的是屏幕上所有触点的信息
            ad.innerHTML = `同时按下的触点个数: ${e.changedTouches.length}<br>
                当前元素上触点个数: ${e.targetTouches.length}<br>
                当前屏幕上的触点个数: ${e.touches.length}
                `
        })

        ad.addEventListener('touchmove', function(e){
            this.style.background = '#aef';
            //显示当前触点移动的坐标
            let x = e.changedTouches[0].clientX;
            let y = e.changedTouches[0].clientY;
            ad.innerHTML = `同时滑动的触点个数: ${e.changedTouches.length}<br>
                当前元素上触点个数: ${e.targetTouches.length}<br>
                当前屏幕上的触点个数: ${e.touches.length}<br>

                当前触点的移动坐标: <br> x: ${x}<br> y: ${y}


                `
        })

        ad.addEventListener('touchend', function(e){
            this.style.background = '#258';

            ad.innerHTML = `同时抬起的触点个数: ${e.changedTouches.length}<br>
                当前元素上触点个数: ${e.targetTouches.length}<br>
                当前屏幕上的触点个数: ${e.touches.length}
                `
        })
    </script>
</body>
</html>